<script lang="ts">
export default {
  name: "admin_code"
}
</script>
<template>
  <div>
    <t-table row-key="id" :data="data.CodeAllList" :columns="CodeTableColumns"
             bordered hover stripe paginationAffixedBottom size="small"
             :loading="data.Loading" tableLayout="auto" :pagination="{
               pageSize:data.CodeAllListPagination.pageSize,
               current:data.CodeAllListPagination.current,
               total:data.CodeAllListPagination.total,
               pageSizeOptions:[10,20,30,50,100,200,300,500,1000]
               }" @page-change="onPageChange" @sort-change="onSortChange">
      <template #role="db">
        <t-tooltip
            :content="`【${db.row.role.id}】【${db.row.role.key}】【${db.row.role.name}】`">
          <template v-if="db.row.role.id === 1">
            <t-tag theme="danger" variant="light-outline" shape="round" size="small">
              <template #icon>
                <StarFilledIcon/>
              </template>
              {{ db.row.role.name }}
            </t-tag>
          </template>
          <template v-else-if="db.row.role.id === 2">
            <t-tag theme="warning" variant="light-outline" shape="round" size="small">
              <template #icon>
                <StarIcon/>
              </template>
              {{ db.row.role.name }}
            </t-tag>
          </template>
          <template v-else>
            <t-tag theme="success" variant="light-outline" shape="round" size="small">
              <template #icon>
                <UserIcon/>
              </template>
              {{ db.row.role.name }}
            </t-tag>
          </template>
        </t-tooltip>
      </template>
      <template #user_id="db">
        <div v-if="db.row.user_id > 0">
          <t-tag size="small" theme="primary" variant="light">
            <template #icon>
              <UserIcon/>
            </template>
            {{ db.row.user_id }}：注册于{{ toLocalTimeByTimeSecond(db.row.register_at).substring(5, 20) }}
          </t-tag>
        </div>
      </template>
      <template #created_at="db">
        <t-tag size="small" theme="default" variant="light">
          <template #icon>
            <TimeFilledIcon/>
          </template>
          {{ toLocalTimeByTimeSecond(db.row.created_at) }}
        </t-tag>
      </template>
      <template #code="db">
        <t-tag size="small" :theme="db.row.user_id === 0 ? 'success' : 'danger'" variant="light">
          {{ db.row.code }}
        </t-tag>
      </template>
      <template #cmd="db">
        <template v-if="db.row.user_id <= 0">
          <t-popconfirm content="确认删除吗" theme="danger" @confirm="DeleteCodeByID(db.row.id)">
            <t-button theme="danger" size="small">
              <template #icon>
                <DeleteIcon/>
              </template>
              删除
            </t-button>
          </t-popconfirm>
        </template>
      </template>
      <template #topContent>
        <t-space style="margin-bottom: 0.6em">
          <t-button @click="GetAllCodeList" theme="primary" size="small">
            <template #icon>
              <RefreshIcon/>
            </template>
            刷新列表
          </t-button>
          <CreateNewRegisterCode @success="GetAllCodeList"/>
        </t-space>
      </template>
    </t-table>
  </div>
</template>
<script lang="ts" setup>
import {onMounted, reactive} from "vue";
import {PageInfo, SortInfo} from "tdesign-vue-next";
import api from "../../../api/api";
import {
  RefreshIcon, TimeFilledIcon,
  UserIcon, DeleteIcon,
  StarFilledIcon, StarIcon,
} from "tdesign-icons-vue-next";
import {PrimaryTableCol} from "tdesign-vue-next";
import {RegisterCode} from "../../../tool/types";
import {toLocalTimeByTimeSecond} from "../../../tool/time";
import CreateNewRegisterCode from "./code/create_code.vue";

const data = reactive({
  Loading: false,
  CodeAllList: new Array<RegisterCode>(),
  CodeAllListPagination: {
    total: 0,
    pageSize: 10,
    current: 1,
  }
})

const CodeTableColumns: Array<PrimaryTableCol> = [
  {
    colKey: 'id',
    align: 'center',
    width: '80',
    title: 'ID',
    sorter: true
  },
  {
    colKey: 'role',
    align: 'center',
    width: '130',
    title: '权限信息'
  },
  {
    colKey: 'user_id',
    align: 'center',
    width: '210',
    title: '已注册的用户ID'
  },
  {
    colKey: 'code',
    align: 'center',
    width: '500',
    title: '注册码'
  },
  {
    colKey: 'cmd_user_id',
    align: 'center',
    width: '80',
    title: '创建人'
  },
  {
    colKey: 'created_at',
    align: 'center',
    width: '210',
    title: '创建时间'
  },
  {
    colKey: 'cmd',
    title: '操作'
  }
]

const GetAllCodeList = async () => {
  data.Loading = true
  let res = await api.Admin.Code.GetAllRegisterCode()
  if (res != null) {
    data.CodeAllList = res.data
    data.CodeAllListPagination.total = data.CodeAllList.length
  }
  data.Loading = false
}

const DeleteCodeByID = async (id: number) => {
  let res = await api.Admin.Code.DeleteCode({
    id: id,
  })
  if (res != null) {
    await GetAllCodeList()
  }
}

const onPageChange = (val: PageInfo) => {
  data.CodeAllListPagination.current = val.current
  data.CodeAllListPagination.pageSize = val.pageSize
}

const onSortChange = (val: SortInfo) => {
  if (val === undefined) {
    GetAllCodeList()
    return
  }
  if (val.descending) {
    //倒序
    let temp = data.CodeAllList.sort((a, b) => {
      return b.id - a.id
    }) as Array<RegisterCode>
    data.CodeAllList = []
    data.CodeAllList = temp
  } else {
    //顺序
    let temp = data.CodeAllList.sort((a, b) => {
      return a.id - b.id
    }) as Array<RegisterCode>
    data.CodeAllList = []
    data.CodeAllList = temp
  }
}
onMounted(async () => {
  await GetAllCodeList()
})
</script>